<template>
	<view>

			
		<view class="cur-dept" @click="backward()">
			{{ getNav }}
		</view>

		<clock-overview :ft="filter_time" :overviewDeptId="getLastDeptInfo ? getLastDeptInfo.id : -1"
						@filter_change="filterChangeHandler">
		</clock-overview>
	
		<view class="root-wrapper">
			
			<transition-group name="list-complete" tag="p">
				<!-- 本页面负责两个逻辑 我不知道怎么在uniapp中实现Vue Router那样的局部路由 -->
				<!-- 所以直接在一页中混入两个逻辑 一个负责部门的显示 当部门之下没有部门后则显示学生的信息 -->
				<clock-card v-for="(item,index) in l" :key="item.id"
							:info="item" :ft="filter_time"
							@clickCard="clickCardHandler">
				</clock-card>
				
				<!-- 打卡的学生 -->
				<individual-card
					v-for="item in stu_list" 
					:key="item.userId"
					v-bind:info="item">
				</individual-card>
				
				<!-- 没打卡的学生 -->
				<individual-card
					v-for="item in unfinished_list" 
					:key="'unfinished'+item.userId"
					v-bind:info="item"
					:unfinished="true">
				</individual-card>
				
			</transition-group>
		</view>	
	</view>
</template>

<script>
	import clockCard from '../../components/clock-card.vue'
	import clockOverview from '../../components/clock-overview.vue'
	import individualCard from '../../components/individual-card.vue'
	
	
	export default {
		
		components: {
			clockCard,
			clockOverview,
			individualCard
		},
		onLoad() {
			let that = this
			
			this.$u.api.getDeptTree().then(res => {
				that.deptTree = res.data[0]
				// 初始化页面数据
				// 同步插入原始dept
				this.deptIdStack.push({
					name: this.$store.state.userInfo.department,
					id: uni.getStorageSync('lifeData').deptId
				})
			
			})

		},
	
		computed: {
			getLastDeptInfo: function() {
				// 之所以不直接返回id 是因为初始化时id为undefined
				return this.deptIdStack[this.deptIdStack.length-1]
			},
			getNav: function() {
				// 放弃面包屑
				let last = this.deptIdStack[this.deptIdStack.length-1]
				let name = last ? last.name : ''
				return this.deptIdStack.length > 1 ? '../' + name : name
			}
		},
		watch: {
			getLastDeptInfo: function(newVal) {
				if (this.deptIdStack.length === 0) {
					return
				}
				console.log('new val', newVal.id)
				this.l = []
				this.stu_list = []
				this.unfinished_list = []
				
				uni.showLoading({
				    title: '加载中'
				})
				
				let tar = this.$dept_tree_handler.locate_node_by_name(this.deptTree, newVal.id)
				
				// 判定没有部门之后显示学生
				if (tar.children.length === 0) {
					console.log('没有部门了')
					this.setStuListByTimeNDeptId(newVal.id, this.filter_time)
					return
				} else {
					this.l = tar.children
				}
				
				uni.hideLoading()
			}
		},
		methods: {
			
			filterChangeHandler: function(param) {
				console.log('新时间', param)
				this.filter_time = param
				
				if (this.l.length === 0) {
					console.log('刷新学生信息')
					this.setStuListByTimeNDeptId(this.getLastDeptInfo.id, param)
				}
			},
			
			clickCardHandler: function(param) {
				// console.log(param)
				this.deptIdStack.push(param)
			},
			
			// 返回上一层页面
			backward: function() {
				let len = this.deptIdStack.length
				if (len === 1) {
					return
				}
				this.deptIdStack.splice(len-1, len)
			},
			// 获取学生打卡情况的封装
			setStuListByTimeNDeptId: function(deptId, ft) {
				this.stu_list = []
				this.unfinished_list = []
				
				// 获取详细数据
				this.$u.api.getDeptAllInfo({
					'date': ft,
					'deptId': deptId,
					'userId': 0				// this.$store.state.deptId
				}).then(msg => {
					this.stu_list = msg.data
				})
				
				// 获取未打卡详细数据
				this.$u.api.getDeptUnClockedInfo({
					'date': ft,
					'deptId': deptId
				}).then(unchecked => {
					this.unfinished_list = unchecked.data
				})
			}
		},
			
			
	
		data() {
			return {
				filter_time: this.$time_formatter.get_today(),
				deptIdStack: [],
				l:[],
				stu_list: [], // 学生列表
				unfinished_list: [],	// 未打卡列表
				deptTree: {}
			}
		}
	}
	
</script>

<style scoped>
	.list-complete-item {
	  transition: all 1s ease;
	}
	
	.list-complete-leave-to,
	.list-complete-enter-from {
	  opacity: 0;
	}
	
	.cur-dept {
		margin-top: 30rpx;
		text-align: center;
		font-size: 17px;
		font-weight: 700;
	}
</style>
